<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>精灵日志</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" name="search" lay-filter="table-search" id="search">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">选择区服:</label>
                            <div class="layui-input-inline">
                                <select name="gameArea" class="layui-select">
                                    <option v-for="(item,index) in services" :value="item.server_id" :selected="index==0">{{item.name}}</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">账号ID:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="memId" />
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">角色ID:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="roleId" />
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">角色名:</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" name="roleName" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">记录时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createDateBegin" id="createTime0"
                                       placeholder="开始时间" autocomplete="off" class="layui-input" />
                                <input type="text" name="createDateEnd" id="createTime1"
                                       placeholder="截止时间" autocomplete="off" class="layui-input" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn">
                                <i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
      <!--  <script type="text/html" id="topToolBar">
            <div class="layui-btn-container">
            </div>
        </script>-->
        <script type="text/html" id="topToolBar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"  lay-event="add" auth="package:add">新增</button>
            </div>
        </script>


        <table class="layui-hide" id="current-table" lay-filter="current-table"></table>
        <script type="text/html" id="currentTableBar">
        </script>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<style>
    .layui-table-cell { /*自适应行高*/
        height: auto !important;
        white-space: normal;
    }
</style>
<script>
var mapList = getEnum('map');
var equipments = getEnum('equip')
var equipAttrList = getEnum('equipAttr')
var petSkillList = getEnum('petSkill')
var petAttrList = getEnum('petAttr')
function getEquipName(itemId) {
    for(var k in equipments){
        if (equipments[k].id === itemId){
            return equipments[k].name;
        }
    }
    return itemId;
}

function getCurrencyName(key) {
    const currencyMap = {
        1: '华夏币',
        2: '银元',
        3: '元宝',
    };
    return currencyMap[key] || '未知货币';
}

new Vue({
    el: "#search",
    data: {
        services: JSON.parse(localStorage.getItem('services')),
        mapList:mapList,
    },
    created() {

    },
    updated() {

    },
    mounted() {
        var _this = this;

        layui.use(['form', 'table','laytpl'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            laydate=layui.laydate;

            laydate.render({
                elem: '#createTime0',
                value: getYmd(0)
            });
            laydate.render({
                elem: '#createTime1',
                value: getYmd(1)
            })
            var laytpl = layui.laytpl;

            table.render({
                elem: '#current-table',
                url: "/admin/logRolePet/paginate",
                where:form.val("table-search"),
                toolbar: '#topToolBar',
                defaultToolbar: ['filter'],
                cols: [[

                    {field: "logTime", title: "日志生成时间",templet(row){
                            return getYMDHMS(row.logTime)
                        }},
                    {field: "gameArea", title: "服ID",},
                    {field: "memId", title: "账号ID",},
                    {field: "roleId", title: "角色ID",},
                    {field: "nick", title: "角色昵称",},
                    {field: "unique_id", title: "宠物唯一ID"},
                    {field:"use_material",title: "使用材料",  templet: function(row) {
                            var usematerialArray = JSON.parse(row.use_material);
                            if (usematerialArray.length > 0) {
                                var materialStrings = usematerialArray.map(function(item) {
                                    var material = getEquipName(item.key);
                                    var value = item.value;
                                    return (material !== undefined ? material : '无') + ':' + value + '<br>';
                                });

                                return materialStrings.join(', '); // 使用逗号和空格分隔每组数据
                            }else {
                                return "无";
                            }
                        }},
                    {
                        field: "use_money",
                        title: "使用货币",
                        templet: row => JSON.parse(row.use_money).map(({ key, value }) => `${getCurrencyName(key)}:${value}`).join('<br>')
                    },

                    {field: "action_before_data", title: "使用前数据" ,width:300, templet: function(row){
                            var abdata = JSON.parse(row.action_before_data);
                            if(abdata !== null){
                                //遍历装备属性
                                // 遍历attrs1数组
                                abdata.skills=datafromatStr(abdata.skills,petSkillList,3);
                                abdata.attrs1=datafromatStr(abdata.attrs1,equipAttrList,1);
                                abdata.attrs2=datafromatStr(abdata.attrs2,petAttrList,1);
                                let datastring = `exp:${abdata.exp}<br>`;
                                datastring += abdata.attrs1.reduce((str, attr) => {
                                    const [key, value] = Object.entries(attr)[0];
                                    return str ? `${str},${key}:${value}` : `${key}:${value}`;
                                }, '') + '<br>';
                                console.log('attrs1:',abdata.attrs2)
                                if (abdata.attrs2.length > 0) {
                                    datastring += abdata.attrs2.reduce((str, attr) => {
                                        const [key, value] = Object.entries(attr)[0];
                                        return str ? `${str},${key}:${value}` : `${key}:${value}`;
                                    }, '') + '<br>';
                                    //datastring += `${abdata.attrs2.map(attr => `${Object.entries(attr)[0]}`).join(',')}\n`.replaceAll('\n','<br>');
                                }
                                console.log('skills:',abdata.skills)
                                if (abdata.skills.length > 0) {
                                    datastring += abdata.skills.reduce((str, attr) => {
                                        const [key, value] = Object.entries(attr)[0];
                                        return str ? `${str},${key}:${value}` : `${key}:${value}`;
                                    }, '') + '<br>';
                                    //datastring += `${abdata.skills.map(attr => `${Object.entries(attr)[0]}`).join(',')}\n`.replaceAll('\n','<br>');
                                }
                                return datastring;
                            }
                            return null;

                        },


                },
                    {field: "action_after_data", title: "使用后数据" ,width:300, templet: function(row){
                            var abdata = JSON.parse(row.action_after_data);
                            if(abdata !== null){
                                //遍历装备属性
                                // 遍历attrs1数组
                                abdata.skills=datafromatStr(abdata.skills,petSkillList,3);
                                abdata.attrs1=datafromatStr(abdata.attrs1,equipAttrList,1);
                                abdata.attrs2=datafromatStr(abdata.attrs2,petAttrList,1);
                                let datastring = `exp:${abdata.exp}<br>`;
                                //datastring += `${abdata.attrs1.map(attr => `${Object.entries(attr)[0]}`).join(',')}\n`.replaceAll('\n','<br>');;
                                datastring += abdata.attrs1.reduce((str, attr) => {
                                    const [key, value] = Object.entries(attr)[0];
                                    return str ? `${str},${key}:${value}` : `${key}:${value}`;
                                }, '') + '<br>';
                                console.log('attrs1:',abdata.attrs2)
                                if (abdata.attrs2.length > 0) {
                                    datastring += abdata.attrs2.reduce((str, attr) => {
                                        const [key, value] = Object.entries(attr)[0];
                                        return str ? `${str},${key}:${value}` : `${key}:${value}`;
                                    }, '') + '<br>';
                                    //datastring += `${abdata.attrs2.map(attr => `${Object.entries(attr)[0]}`).join(',')}\n`.replaceAll('\n','<br>');
                                }
                                console.log('skills:',abdata.skills)
                                if (abdata.skills.length > 0) {
                                    datastring += abdata.skills.reduce((str, attr) => {
                                        const [key, value] = Object.entries(attr)[0];
                                        return str ? `${str},${key}:${value}` : `${key}:${value}`;
                                    }, '') + '<br>';
                                    //datastring += `${abdata.skills.map(attr => `${Object.entries(attr)[0]}`).join(',')}\n`.replaceAll('\n','<br>');
                                }
                                return datastring;
                            }
                            return null;


                        }

                    },
                    {field: "action_type", title: "操作类型"}


                ]
                ],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,
                page: true,
                skin: 'line'
            });
            form.on('submit(data-search-btn)', function (data) {
                var searchData = data.field;
                //执行搜索重载
                table.reload('current-table', {
                    page: { curr : 1 }
                    , where:searchData
                }, 'data');
                return false;
            });

            //格式化处理函数
            function datafromatType(row) {
                //定义一组数组定义显示
                var vulues=[
                    (   { value: 1, title: '玩家' },
                        { value: 0, title: 'NPC' })
                    ];
            }

            function datafromatStr(data, list,index) {
                return data.map(attr => {
                    if (Array.isArray(attr)) {
                        const keyNumber = parseInt(attr[1], 10);
                        const valNumber = parseInt(attr[4], 10);
                        if (keyNumber === 0 || keyNumber === -1) {
                            return null; // 如果 key 值为 0 或 -1，则返回 null
                        }

                        const matchedAttr = list.find(item => item.id === keyNumber);

                        if (matchedAttr) {
                            if(index==3){
                                if (valNumber === 0 || valNumber === -1) {
                                    return null; // 如果 key 值为 0 或 -1，则返回 null
                                }
                                const matchedAttrval = list.find(item => item.id === valNumber);
                                return { [matchedAttr.name]: [matchedAttrval.name]  }; // 返回键值对对象
                            }

                            return { [matchedAttr.name]: attr[3] }; // 返回键值对对象

                        }

                    } else {
                        const key = Object.keys(attr)[0];
                        const val = Object.keys(attr)[1];
                        const matchedAttr = list.find(item => item.id === attr[key]);
                        if (matchedAttr) {
                            if (attr.hasOwnProperty('val')) { // 检查是否存在 'val' 属性
                                const val = Object.values(attr)[1]; // 获取 'val' 对应的值
                                const matchedAttrVal = list.find(item => item.id === val);
                                if (matchedAttrVal) {
                                    return { [`${matchedAttr.name}=>${matchedAttrVal.name}`]:0 }; // 返回键值对对象
                                }
                            }
                            return { [matchedAttr.name]: attr[val] }; // 返回键值对对象
                        }
                    }
                    return null;
                }).filter(attr => attr !== null);
            }




        });
    }
})
</script>
</body>
</html>
